<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Tug of War Duel - Comparison Degree</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@500;700&display=swap');

        :root {
            --sky-blue: #87CEEB;
            --dirt-brown: #8d6e63;
            --grass-green: #4caf50;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            overflow: hidden;
            background: var(--sky-blue);
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .title-font {
            font-family: 'Fredoka One', cursive;
        }

        /* Ground & Rope */
        .ground {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40vh;
            background: linear-gradient(to bottom, #558b2f 0%, #33691e 20%, #4e342e 20%, #3e2723 100%);
            z-index: 5;
        }

        .center-line {
            position: absolute;
            bottom: 20vh;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 100px;
            background: white;
            border-radius: 4px;
            z-index: 6;
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        .rope {
            position: absolute;
            bottom: 28vh;
            width: 200vw;
            height: 12px;
            background: repeating-linear-gradient(45deg, #d7ccc8, #d7ccc8 10px, #a1887f 10px, #a1887f 20px);
            box-shadow: 0 4px 4px rgba(0,0,0,0.3);
            z-index: 10;
            transition: left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .rope-marker {
            position: absolute;
            top: -10px;
            left: 50%;
            width: 4px;
            height: 32px;
            background: red;
            transform: translateX(-50%);
        }

        /* Characters */
        .team {
            position: absolute;
            bottom: 22vh;
            display: flex;
            gap: 10px;
            transition: all 0.5s ease;
            z-index: 15;
        }

        .character {
            font-size: 3.5rem;
            filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2));
            animation: pull 1s infinite alternate ease-in-out;
        }

        @keyframes pull {
            from { transform: translateX(0) rotate(5deg); }
            to { transform: translateX(-5px) rotate(-5deg); }
        }

        .shake {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translate(-50%, 0); }
            20% { transform: translate(-52%, -5px); }
            40% { transform: translate(-48%, 5px); }
            60% { transform: translate(-51%, -3px); }
            80% { transform: translate(-49%, 3px); }
        }

        .cloud {
            position: absolute;
            background: white;
            border-radius: 50px;
            opacity: 0.8;
            animation: moveClouds 30s linear infinite;
            z-index: 1;
        }

        @keyframes moveClouds {
            from { transform: translateX(-200px); }
            to { transform: translateX(120vw); }
        }
    </style>
</head>
<body class="p-4">

    <!-- Background -->
    <div class="cloud w-32 h-10 top-10" style="animation-delay: 0s;"></div>
    <div class="cloud w-48 h-14 top-24" style="animation-delay: -10s;"></div>
    <div class="ground"></div>
    <div class="center-line"></div>

    <!-- Header -->
    <div class="z-20 text-center mb-4">
        <h1 class="title-font text-3xl md:text-5xl text-red-600 drop-shadow-lg uppercase tracking-widest">Tug of War Duel</h1>
        <p class="text-blue-900 font-bold bg-white/70 px-4 py-1 rounded-full inline-block mt-2">
            Subject: Comparison Degree (Set 2)
        </p>
    </div>

    <!-- Tug Area -->
    <div id="rope-container" class="fixed inset-0 pointer-events-none">
        <div id="main-rope" class="rope" style="left: -50vw;">
            <div class="rope-marker"></div>
        </div>
        
        <!-- Player Team -->
        <div id="player-team" class="team" style="left: 20%;">
            <div class="character">🧒</div>
            <div class="character" style="animation-delay: 0.2s;">👦</div>
            <div class="character" style="animation-delay: 0.4s;">👧</div>
        </div>

        <!-- Rival Team -->
        <div id="rival-team" class="team" style="right: 20%;">
            <div class="character" style="transform: scaleX(-1);">👹</div>
            <div class="character" style="transform: scaleX(-1); animation-delay: 0.2s;">👺</div>
            <div class="character" style="transform: scaleX(-1); animation-delay: 0.4s;">👾</div>
        </div>
    </div>

    <!-- UI Panel -->
    <div id="game-panel" class="bg-white/95 backdrop-blur-sm p-6 rounded-3xl shadow-2xl border-4 border-blue-500 w-full max-w-md mx-4 mt-10 z-30 relative transition-all">
        
        <!-- Start Screen -->
        <div id="start-screen" class="text-center">
            <div class="text-6xl mb-4">💪</div>
            <h2 class="text-2xl font-bold text-gray-800 mb-2">Tug of War!</h2>
            <p class="text-gray-600 mb-6 italic">Pull the rival team across the center line by answering comparison questions correctly!</p>
            <button onclick="startGame()" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-black py-4 px-8 rounded-2xl text-xl shadow-[0_6px_0_rgb(30,58,138)] transition-all active:shadow-none active:translate-y-1">
                START PULLING! 🚩
            </button>
        </div>

        <!-- Quiz Screen -->
        <div id="quiz-screen" class="hidden">
            <div class="flex justify-between items-center mb-4">
                <span class="bg-blue-100 text-blue-700 font-black px-4 py-1 rounded-full text-xs">
                    QUESTION <span id="q-number">1</span>/10
                </span>
                <div id="status-msg" class="text-sm font-bold"></div>
            </div>
            
            <h3 id="question-text" class="text-xl font-bold text-gray-800 text-center mb-6 min-h-[60px] flex items-center justify-center">
                Loading...
            </h3>

            <div id="options-grid" class="grid grid-cols-1 gap-3">
                <!-- Options injected by JS -->
            </div>
        </div>

        <!-- Result Screen -->
        <div id="result-screen" class="hidden text-center">
            <div id="result-icon" class="text-7xl mb-4">🏆</div>
            <h2 id="result-title" class="text-3xl title-font mb-2">YOU WIN!</h2>
            <p id="result-desc" class="text-gray-600 mb-8 font-medium"></p>
            <button onclick="location.reload()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-10 rounded-2xl shadow-lg">
                PLAY AGAIN
            </button>
        </div>
    </div>

    <!-- Music Control -->
    <div class="fixed bottom-6 left-6 z-50">
        <button id="audio-toggle" class="bg-white/90 p-4 rounded-full shadow-xl text-2xl border-2 border-blue-200">
            🎵
        </button>
    </div>

    <script>
        // Questions Set
        const questions = [
            { q: "A plane is ... than a car.", o: ["Fast", "Faster", "Fastest"], a: 1 },
            { q: "This cake is the ... in the bakery.", o: ["Delicious", "More delicious", "Most delicious"], a: 2 },
            { q: "Your bag is as ... as mine.", o: ["Heavy", "Heavier", "Heaviest"], a: 0 },
            { q: "The Pacific is the ... ocean.", o: ["Deep", "Deeper", "Deepest"], a: 2 },
            { q: "Iron is ... than wood.", o: ["Heavy", "Heavier", "Heaviest"], a: 1 },
            { q: "English is ... than Chinese for many people.", o: ["Easy", "Easier", "Easiest"], a: 1 },
            { q: "A diamond is ... than a rock.", o: ["Expensive", "More expensive", "Most expensive"], a: 1 },
            { q: "Mount Kilimanjaro is the ... mountain in Africa.", o: ["High", "Higher", "Highest"], a: 2 },
            { q: "He is the ... student in the class.", o: ["Smart", "Smarter", "Smartest"], a: 2 },
            { q: "My coffee is ... than yours.", o: ["Hot", "Hotter", "Hottest"], a: 1 }
        ];

        // Game State
        let currentIdx = 0;
        let pullPosition = 0; 
        let isMuted = false;
        let gameRunning = false;
        let audioInit = false;

        // Audio Engine
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        
        function playTone(f, d, t = 'sine', v = 0.1) {
            if (isMuted) return;
            const o = audioCtx.createOscillator();
            const g = audioCtx.createGain();
            o.type = t;
            o.frequency.setValueAtTime(f, audioCtx.currentTime);
            g.gain.setValueAtTime(v, audioCtx.currentTime);
            g.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + d);
            o.connect(g); g.connect(audioCtx.destination);
            o.start(); o.stop(audioCtx.currentTime + d);
        }

        function playDrumBeat() {
            let beat = 0;
            setInterval(() => {
                if (gameRunning) {
                    playTone(60 + (beat % 2 === 0 ? 20 : 0), 0.2, 'square', 0.02);
                    if (beat % 4 === 0) playTone(440, 0.1, 'triangle', 0.01);
                    beat++;
                }
            }, 500);
        }

        // Game Logic
        function startGame() {
            if (!audioInit) { audioCtx.resume(); playDrumBeat(); audioInit = true; }
            gameRunning = true;
            document.getElementById('start-screen').classList.add('hidden');
            document.getElementById('quiz-screen').classList.remove('hidden');
            loadQuestion();
            startRivalAI();
        }

        function loadQuestion() {
            if (currentIdx >= questions.length || Math.abs(pullPosition) >= 150) {
                endGame();
                return;
            }

            const data = questions[currentIdx];
            document.getElementById('q-number').innerText = currentIdx + 1;
            document.getElementById('question-text').innerText = data.q;
            
            const grid = document.getElementById('options-grid');
            grid.innerHTML = '';
            
            data.o.forEach((opt, i) => {
                const btn = document.createElement('button');
                btn.className = "p-4 bg-blue-50 border-2 border-blue-200 rounded-2xl font-bold text-gray-700 hover:bg-blue-100 transition-all active:scale-95 text-lg shadow-sm";
                btn.innerText = opt;
                btn.onclick = () => checkAnswer(i);
                grid.appendChild(btn);
            });
        }

        function checkAnswer(choice) {
            const data = questions[currentIdx];
            const status = document.getElementById('status-msg');
            
            if (choice === data.a) {
                pullPosition += 25;
                status.innerText = "STRONG! 💪";
                status.className = "text-green-600 font-black animate-bounce";
                playTone(440, 0.2, 'sine', 0.1);
                setTimeout(() => playTone(554, 0.2, 'sine', 0.1), 100);
            } else {
                pullPosition -= 15;
                status.innerText = "WEAK! 😰";
                status.className = "text-red-600 font-black";
                playTone(100, 0.5, 'sawtooth', 0.1);
                document.getElementById('game-panel').classList.add('shake');
                setTimeout(() => document.getElementById('game-panel').classList.remove('shake'), 500);
            }

            updateVisuals();
            currentIdx++;
            setTimeout(loadQuestion, 1000);
        }

        function startRivalAI() {
            const aiTimer = setInterval(() => {
                if (!gameRunning) { clearInterval(aiTimer); return; }
                
                // Rival pulls every 3 seconds
                if (Math.random() > 0.4) {
                    pullPosition -= 6;
                    updateVisuals();
                }
            }, 3000);
        }

        function updateVisuals() {
            const rope = document.getElementById('main-rope');
            const pTeam = document.getElementById('player-team');
            const rTeam = document.getElementById('rival-team');

            rope.style.left = `calc(-50vw + ${pullPosition}px)`;
            pTeam.style.left = `calc(20% + ${pullPosition}px)`;
            rTeam.style.right = `calc(20% - ${pullPosition}px)`;

            if (Math.abs(pullPosition) >= 150) endGame();
        }

        function endGame() {
            gameRunning = false;
            document.getElementById('quiz-screen').classList.add('hidden');
            document.getElementById('result-screen').classList.remove('hidden');
            
            const title = document.getElementById('result-title');
            const desc = document.getElementById('result-desc');
            const icon = document.getElementById('result-icon');

            if (pullPosition > 0) {
                title.innerText = "VICTORY! 🏆";
                desc.innerText = "You successfully pulled the rival team past the center line!";
                icon.innerText = "🏆🔥";
                playTone(523, 0.3); playTone(659, 0.3); playTone(783, 0.5);
            } else {
                title.innerText = "GAME OVER! ❌";
                desc.innerText = "The rivals were too strong. Keep practicing!";
                icon.innerText = "💀🤕";
                playTone(110, 0.8, 'sawtooth', 0.1);
            }
        }

        document.getElementById('audio-toggle').onclick = () => {
            isMuted = !isMuted;
            document.getElementById('audio-toggle').innerText = isMuted ? "🔇" : "🎵";
        };
    </script>
</body>
</html>